import styles from './index.less';

import { UploadOutlined } from '@ant-design/icons';
import React, { useState } from 'react';
import { Button, Card, Col, Divider, Form, Row, Select, Space, Upload } from 'antd';
import TextArea from 'antd/lib/input/TextArea';
import Input from 'antd/es/input/Input';
import message from 'antd/es/message';
import { genChartByAiUsingPOST } from '@/services/zoffyBI/chartController';
import ReactECharts from 'echarts-for-react';

const { Option } = Select;

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

const AddChart: React.FC = () => {
  const [chart, setChart] = useState<API.BiResponse>({});
  const [option, setOption] = useState<JSON>();
  const [submitting, setSubmitting] = useState<boolean>(false);

  const onFinish = async (values: any) => {
    if (submitting) {
      return;
    }
    setSubmitting(true);
    setChart({});
    setOption(undefined);
    const params = {
      ...values,
      file: undefined,
    };
    try {
      const res = await genChartByAiUsingPOST(params, {}, values.file.file.originFileObj);
      if (!res?.data) {
        message.error(res.message);
      } else {
        message.success('生成成功');
        setChart(res?.data);
        const chartOption = JSON.parse(res?.data?.genChart || '');
        setOption(chartOption);
      }
    } catch (e: any) {
      message.error('分析失败:' + e.message);
      setSubmitting(false);
    }
    setSubmitting(false);
  };

  return (
    <div className={styles.container}>
      <Row>
        <Col span={12}>
          <Card>
            <Form
              name="validate_other"
              {...formItemLayout}
              onFinish={onFinish}
              initialValues={{
                'input-number': 3,
                'checkbox-group': ['A', 'B'],
                rate: 3.5,
                'color-picker': null,
              }}
              style={{ maxWidth: 600 }}
            >
              <Form.Item name="name" label="图表名称">
                <Input placeholder="请输入图标名称" />
              </Form.Item>
              <Form.Item name="goal" label="分析目标" rules={[{ required: true }]}>
                <TextArea placeholder="请输入你的分析需求" />
              </Form.Item>
              <Form.Item
                name="chartType"
                label="图表类型"
                hasFeedback
                rules={[{ required: true, message: 'Please select chart type!' }]}
              >
                <Select placeholder="Please select chart type">
                  <Option value="合适的图表">自动选择</Option>
                  <Option value="折线图">折线图</Option>
                  <Option value="饼状图">饼状图</Option>
                  <Option value="堆叠图">堆叠图</Option>
                  <Option value="柱状图">柱状图</Option>
                </Select>
              </Form.Item>

              <Form.Item name="file" label="Excel文件" rules={[{ required: true }]}>
                <Upload name="logo" listType="picture" maxCount={1}>
                  <Button icon={<UploadOutlined />}>点击上传</Button>
                </Upload>
              </Form.Item>

              <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
                <Space>
                  <Button
                    type="primary"
                    htmlType="submit"
                    loading={submitting}
                    disabled={submitting}
                  >
                    提交
                  </Button>
                  <Button htmlType="reset">重置</Button>
                </Space>
              </Form.Item>
            </Form>
          </Card>
        </Col>
        <Col span={12}>
          <Card title={'分析结论'} style={{ whiteSpace: 'pre-line' }}>
            {chart?.genResult ?? '请在左侧提交内容'}
          </Card>
          <Divider />
          <Card title={'智能图表'}>
            {option ? <ReactECharts option={option} /> : '请在左侧提交内容'}
          </Card>
        </Col>
      </Row>
    </div>
  );
};
export default AddChart;
